import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Descriptions, Typography, Alert} from "antd"

const {Title} = Typography;

// 定义UI组件
class UserInfo extends Component {
    render() {
        // 获取状态
        const {userInfo, count} = this.props
        return (
            <div className={'user-info'}>
                <Title>用户信息组件</Title>
                <Alert message={'用户点赞数：' + count} type="success"/>
                <Descriptions bordered>
                    <Descriptions.Item label="用户名称">{userInfo ? userInfo.username : ''}</Descriptions.Item>
                    <Descriptions.Item label="用户性别">{userInfo ? (userInfo.sex ? '男' : '女') : ''}</Descriptions.Item>
                    <Descriptions.Item label="用户手机">{userInfo ? userInfo.phone : ''}</Descriptions.Item>
                    <Descriptions.Item label="用户签名">{userInfo ? userInfo.sign : ''}</Descriptions.Item>
                </Descriptions>
            </div>
        );
    }
}

// 暴露容器组件
const mapStateToProps = (state) => ({
    userInfo: state.user,
    count: state.count
})
const mapDispatchToProps = {}
export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);
